<template>
    <div class="user-integral">
        <div class="user-integral-tel">
            <p>剩余积分（积分）</p>
            <p>{{balance}}</p>
        </div>
        <div class="tab">
         <a @click="tabId=0" class="{tabId=0}" >使用</a>
         <a @click="tabId=1" class="{tabId=1}" >增加</a>
       </div>
       <div class="box">
         <div v-show="tabId === 0">
             <div class="user-integral-form" v-for="(item,index) in inte" v-if="item.integral_status == 0">
                <span class="user-integral-name">
                    <em class="gray">积分兑换</em> <em >{{item.note}}</em>
                </span>
                <span class="user-integral-time">
                    <p class="gray">{{item.create_time}}</p>
                    <p>{{item.integral}}</p>
                </span>
            </div>
         </div>
         <div v-show="tabId===1">
             <div class="user-integral-form" v-for="(item,index) in inte" v-if="item.integral_status == 1">
                <span class="user-integral-name">
                    <em >商家名称</em><em class="gray">{{item.note}}</em>
                </span>
                <span class="user-integral-time">
                    <p class="gray">{{item.create_time}}</p>
                    <p>{{item.integral}}</p>
                </span>
            </div>
         </div>
       </div>
        
        <!--  -->
    </div>
</template>

<script>
    import {formatDate} from '../../../../static/data.js';
    import axios from "axios";
    import $qs from 'qs'
    export default {
        name:"UserIntegral",
        data () {
            return {
                inte:[],
                tabId:0,
                balance:'',
            }
        },
        components: {
            
        },
        methods:{
            
            integral:function(){
                var that = this
                var openid = localStorage.getItem("openid")
                let pageList = that.$qs.stringify({
                    openid: openid,
                });
                axios({
                    method: "post",
                    url: "/index/user/IntegralRecord",
                    headers: {
                        "Content-Type": "application/x-www-form-urlencoded"
                    },
                    data: pageList
                }).then(res => {
                    console.log(res.data.data);
                    for(var i in res.data.data) {
                        res.data.data[i].create_time = formatDate(new Date(res.data.data[i].create_time * 1000), 'yyyy-MM-dd')
                    }
                    this.inte = res.data.data,
                    this.balance = res.data.data.user.integral
                });
            }
        },
        mounted(){
            this.integral();
            //this.tabId()
        }
    }
</script>

<style scoped>
/* a:hover {
    color: #FE2746;
} */
.tab a{
    width: 50%;
    text-align: center;
    display: inline-block;
    float: left;
}
.user-integral-form{
    width: 94%;
    margin-left: 3%;
    background: #FFF;
    border-radius: 5px;
    margin-top: 15px;
    display: inline-block;
}
.user-integral-tel{
    width:100%;
    text-align: center;
    margin:25px 0;
}
.user-integral-tel p:nth-child(2){
    font-weight: 600;
    font-size:18px;
    margin-top:10px;
}
.gray{
    color:#999;
}
.user-integral-name{
    float: left;
    padding: 20px 12px; 
}
.user-integral-time{
    text-align: right;
    float:right;
    padding: 12px;
}
.user-integral-time .gray{
    font-size:12px;
}
</style>